<script setup lang="ts">
import type { OSInfoProps } from '@/types';

import {
  type ComponentInternalInstance,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
} from 'vue';

import { author, version } from '@/../package.json';

import logo from '@/assets/img/logo.png';
import { formatFileSize } from '@/utils';

defineOptions({
  name: 'SystemAbout',
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const baseUrl = proxy?.$config.baseUrl;

const build = version;
const about = reactive({
  copyright: '本项目提供技术人员调试仪器硬件!',
  title: 'WebOS Client',
});
const osInfo = ref<OSInfoProps>();
const onLoadOSInfo = async () => {
  try {
    const response = await fetch(`${baseUrl}/os/info`);
    const res = await response.json();
    const { data } = res;
    osInfo.value = data as OSInfoProps;
  } catch (error) {
    console.error(error);
  }
};
onMounted(async () => {
  await onLoadOSInfo();
});
</script>

<template>
  <div class="wos-about">
    <div class="top">
      <img :src="logo" alt="logo" />
      <div class="info">
        <div class="title">{{ about.title }}</div>
      </div>
    </div>
    <div class="card">
      <div class="content">
        <div class="label">系统</div>
        <div class="desc">{{ osInfo?.type }} @ {{ osInfo?.arch }}</div>
      </div>
      <div class="content">
        <div class="label">处理器</div>
        <div class="desc">
          {{ osInfo?.cpus[0]?.model }}
        </div>
      </div>
      <div class="content">
        <div class="label">内存</div>
        <div class="desc">
          可用{{ formatFileSize(osInfo?.freemem as number) }} / 总共{{
            formatFileSize(osInfo?.totalmem as number)
          }}
        </div>
      </div>
      <div class="content">
        <div class="label">系统版本</div>
        <div class="desc">{{ osInfo?.platform }} @ {{ osInfo?.release }}</div>
      </div>
    </div>
    <div class="copyright">{{ about.copyright }}</div>
    <div class="version">
      V {{ version }} {{ author.name }} build@{{ build }}
    </div>
  </div>
</template>
<style scoped lang="scss">
.wos-about {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 24px;
  font-weight: 300;
  color: var(--el-text-color-regular);
  text-shadow: none;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 112px;
    padding: 16px 24px;
    margin-bottom: 8px;

    img {
      width: 80px;
      height: 80px;
      text-align: center;
    }

    .info {
      flex-grow: 1;
      text-align: center;

      .title {
        font-size: 40px;
      }
    }
  }

  .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 16px;
    background: transparent;
    border: solid 1px rgb(200 200 200);
    border-radius: var(--radius);

    .content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 12px;
      border-bottom: solid 1px #bcbcbc;

      .label {
        font-size: 14px;
        color: var(--el-text-color-regular);
      }

      .desc {
        color: #666;
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .copyright {
    font-size: 14px;
    color: #999;
    text-align: center;
  }

  .version {
    font-size: 14px;
    color: #999;
    text-align: center;
  }
}
</style>
